<template>
  <div class="custom-layout-container paper-feeling">
    <!-- 全局 -->
    <div class="banner-container">
      <div class="banner-content">
        <AnnCarousel
            :dailyImage="dailyImage.length ? dailyImage : bannerStore.banners"
            :title="title"
            :duration="5000"
        />
      </div>
    </div>
    <div class="custom-main w-11/12 md:w-10/12 rounded-box">
      <slot/>
    </div>
  </div>
</template>
<script setup lang="ts">
import {useBannerStore} from "~/store/banner";
import type {BannerState} from "~/types/banner";
import type {PropType} from "vue/dist/vue";

const bannerStore = useBannerStore();
defineProps({
  // 页面自定义banner,如果有页面传递的图片，优先使用
  dailyImage: {
    type: Array as PropType<BannerState[]>,
    default: () => [],
  },
  title: {
    type: String,
    default: "",
  },
});
</script>
<style lang="less" scoped>
.banner-container {
  height: 50vh;

  .banner-content {
    height: 100%;
    position: relative;
  }
}

.custom-layout-container {
  position: relative;

  &::after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    pointer-events: none;
    display: none;
    z-index: 0;
  }

  background: var(--main-bgc) !important;
  color: var(--text-color) !important;
}

.custom-main {
  margin: 20px auto 0;
  min-height: 50vh;
}

.paper-feeling {
  &::after {
    display: block;
  }
}
</style>
